<template>
	<view class="home">
		<!-- 轮播图 -->
		<view class="banner">
				
		</view>
		<!-- 分类 -->
		<view class="block1"> 
			<view class="b1-item">
				<image src="" mode="" class="b1-img"></image>
				<text class="b1-txt">口碑榜单</text>
			</view>
			<view class="b1-item">
				<image src="" mode="" class="b1-img"></image>
				<text class="b1-txt">积分商城</text>
			</view>
			<view class="b1-item">
				<image src="" mode="" class="b1-img"></image>
				<text class="b1-txt">帮我砍价</text>
			</view>
			<view class="b1-item">
				<image src="" mode="" class="b1-img"></image>
				<text class="b1-txt">9.9包邮</text>
			</view>
			<view class="b1-item" @click="toClassify">
				<image src="" mode="" class="b1-img"></image>
				<text class="b1-txt">全球购</text>
			</view>
		</view>
		
		<!-- 新人钜惠 -->
		<view class="new">
			新人钜惠
		</view>
		
		<!-- 专题 -->
		<view class="seminar">
			<view class="seminar1"></view>
			<view class="seminar2">
				<view>首推商品</view>
				<view>首推商品</view>
				<view>首推商品</view>
			</view>
			<view class="seminar3">
				<view class="seminar3-title">促销品类</view>
				<view class="seminar3-list">
					<view v-for="(item, i) in 8" :key="i"></view>
				</view>
			</view>
		</view>	
		
		<!-- 秒杀 -->
		<view class="secKill">
			<view class="secKill-title">
				<text>限时秒杀</text>
				<text class="text1">整点开启，等你来抢</text>
			</view>
			<view class="secKill-cont">
				<view class="sc-l"></view>
				<view class="sc-r">
					秒杀单品
				</view>
			</view>
		</view>
		
		<!-- 预售 -->
		<view class="sale">
			<view class="sale-title">
				<text>大牌预售</text>
				<text class="text1">12-15 09:00 开卖</text>
			</view>
			<view class="sale-item1">
				会场主图
			</view>
			<view class="sale-item2">
				<view></view>
				<view></view>
				<view></view>
				<view></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods: {
			toClassify(){
				uni.navigateTo({
						url: '/pages/product/classify/classify'
				});
			}
		},
	}
</script>

<style>
.home {
	padding: 0 30upx;
}
.banner {
	width: 100%;
	height: 260upx;
	background-color: #B0B0B0;
	border-radius: 6upx;
}
.block1 {
	width: 100%;
	min-height: 165upx;
	display: flex;
	margin: 40upx 0 40upx 0;
}
.block1 .b1-item {
	flex: 1;
	padding: 0 20upx;
	text-align: center;
	overflow: hidden;
}
.block1 .b1-img {
	width: 108upx;
	height: 108upx;
	background-color: #E6E6E6;
	border-radius: 100%;
}
.block1 .b1-txt {
	margin-top: 20upx;
	display: block;
}

.new {
	width: 100%;
	height: 168upx;
	background-color: #E6E6E6;
	border-radius: 6upx;
}

.seminar {
	width: 100%;
	height: 1243upx;
	background-color: #808080;
	border-radius: 6upx;
	margin-top: 40upx;
	padding: 20upx;
}
.seminar .seminar1 {
	width: 100%;
	height: 260upx;
	background-color: #A2A2A2;
	margin-bottom: 20upx;
}
.seminar .seminar2 {
	display: flex;
}
.seminar .seminar2 view {
	flex: 1;
	height: 260upx;
	background-color: #A2A2A2;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}
.seminar .seminar2 view:nth-child(2){
	margin-left: 10upx;
	margin-right: 10upx;
}
.seminar .seminar3-title {
	width: 100%;
	text-align: center;
	color: #fff;
	line-height: 60upx;
	font-size: 26upx;
}
.seminar .seminar3-list {
	overflow: hidden;
	margin-top: 10upx;
}
.seminar .seminar3-list view{
	width:320upx;
	height:140upx;
	background-color: #EDEDED;
	float: left;
	margin-bottom: 10upx;
}
.seminar .seminar3-list view:nth-child(odd){
	margin-right: 10upx;
}
.secKill {
	margin-top: 20upx;
}
.secKill .secKill-title {
	height: 80upx;
	line-height: 80upx;
	font-size: 28upx;
} 
.secKill .secKill-title .text1 {
	padding: 5upx 10upx;
	background-color: #A2A2A2;
	color: #fff;
	border-radius: 6upx;
	margin-left: 20upx;
}
.secKill .secKill-cont {
	display: flex;
	widows: 100%;
	height: 295upx;
}
.secKill .secKill-cont .sc-l {
	width: 260upx;
	background-color: #C0C0C0;
	margin-right: 10upx;
	border-radius: 6upx;
}
.secKill .secKill-cont .sc-r {
	flex: 1;
	height: 295upx;
	background-color: #B0B0B0;
	border-radius: 6upx;
}
.sale {
	margin-top: 20upx;
}
.sale .sale-title {
	height: 80upx;
	line-height: 80upx;
	font-size: 28upx;
} 
.sale .sale-title .text1 {
	color: #1EDF8B;
	margin-left: 20upx;
}
.sale .sale-item1 {
	width: 100%;
	height: 180upx;
	background-color: #A2A2A2;
	border-radius: 6upx;
	margin-bottom: 10upx;
}
.sale .sale-item2 view{
	width:340upx;
	height:192upx;
	background-color: #E1E1E1;
	border-radius: 6upx;
	float: left;
	margin-bottom: 10upx;
}
.sale .sale-item2 view:nth-child(odd){
	margin-right: 10upx;
}
</style>
